<template class="abc">
  <h2 class="text">经典戏曲目</h2>
  <div class="container" >
	<router-link :to="index.path" v-for="index in de" :key="index.id" >
	  <div class="box">
		  <img :src="index.img" />
		  <p>{{index.name}}</p>
	     <p>{{index.time}}</p>
	    <p>{{index.dizhi}}</p>
	  </div>
	</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';
	const de = ref([
		{
			id: 1,
			name: "杨门将女",
			img: "/public/ym.png",
			time: "2024.10.26 周六 14：30",
			dizhi: "北京|北京展览馆剧场",
			path: '/home/shouye/orders/AA/'
		},
		{
			id: 2,
			name: "霸王别姬",
			img: "/public/bw.png",
			time: "2024.11.23 周六 19：30",
			dizhi: "北京|民族文化宫大剧院",
			path:'/home/shouye/orders/AB/'
		},
		{
			id: 3,
			name: "白蛇传.断桥",
			img: "/public/bs.png",
			time: "2024.11.21 周四 19：30",
			dizhi: "北京|北京艺术中心",
			path:'/home/shouye/orders/AC/'
		},
		{
			id: 4,
			name: "贵妃醉酒",
			img: "/public/gf.png",
			time: "2024.11.21 周四 19：30",
			dizhi: "北京|北京人民剧场",
			path:'/home/shouye/orders/AD/'
		},
		{
			id: 5,
			name: "四郎探母",
			img: "/public/sl.png",
			time: "2024.11.09 周六 14：00",
			dizhi: "西安|西安大剧院",
			path:'/home/shouye/orders/AE/'
		},
		{
			id: 6,
			name: "锁麟囊",
			img: "/public/sln.png",
			time: "2024.11.09 周三 16:00",
			dizhi: "成都|四川大剧院",
			path:'/home/shouye/orders/AF/'
		},
		
	])
</script>
<style scoped>
.text{text-align: center;}
.box{
    background-color: #9e473b; /* 设置每个网格项的背景颜色 */
    color: white; /* 设置文字颜色 */
    padding: 20px; /* 设置内边距 */
    text-align: center; /* 文字居中 */
    font-size: 20px; /* 设置字体大小 */
}

.container{
	background-image: url(/public/bei3.png);
	/* background-repeat: no-repeat; */
	/* background-color: #642016; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 50px; /* 设置网格之间的间距 */
}
a{
	text-decoration: none;
}

</style>